<script setup lang="ts">
import PaginationAlbum from '~/components/PaginationAlbum/index.vue'
import APICommon from '~/api/common/index'

const $router = useRouter()

definePageMeta({
    showSmallSearchBox: true,
})

function handleJumpCooperationUpload() {
    $router.push({
        path: '/cooperation-upload'
    })
}

const column = [{
    label: '入职心安元素',
    jumpLink: '/entry'
}, {
    label: '合作伙伴',
    jumpLink: '/cooperation',
    active: true
}, {
    label: '在线客服',
    jumpLink: '/service'
}, {
    label: '帮助中心',
    jumpLink: '/help'
}, {
    label: '意见反馈',
    jumpLink: '/feedback'
}]


const loading = shallowRef<boolean>(false)

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 16
})

const list = ref<any[]>([])

const total = shallowRef<number>(0)
const $route = useRoute()

function getParentList() {
    const data = {
        category_type: ($route.query.type as string) ?? 'All',
        more: 1
    }

    APICommon.getParentList(data, queryParams.value).then(({ data }) => {
        list.value = data
    })
}

onMounted(() => {
    getParentList()
})


</script>

<template>
    <div class="cooperation">
        <ColumnNav class="left-nav" :column="column" />
        <div class="cooperation-content">
            <div class="title">心安元素合作客户</div>
            <div class="describe title-describe">谢谢如下品牌对心安元素的认可,感谢！</div>
            <div class="describe">合作客户说明</div>
            <div class="describe">
                一直以来心安元素致力于服务4000万的客户朋友，心安元素感谢您过去的选择和认可。作为合作客户，心安元素希望通过展示您的品牌标志及品牌网站，在创业的道路上为您带去绵薄之力。请上传您的品牌标志和您的官方网站<span
                    @click="handleJumpCooperationUpload">（我要上传合作标志和填写网址）</span>，在验证之后，您的品牌标志将出现在心安元素的“合作客户”页面之中。心安元素祝您生意兴隆，品牌蒸蒸日上！
            </div>
            <div v-loading="loading">
                <div class="cooperative-brands-content">
                    <div class="item" v-for="item in list" :key="item.id">
                        <a :href="item.brand_href" target="_blank">
                            <div class="cooperative-logo">
                                <img :src="item.color_icon" alt="logo">
                            </div>
                            <div class="cooperative-text">{{ item.name }}</div>
                        </a>
                    </div>
                </div>
            </div>
            <PaginationAlbum :total="total" v-model:current-page="queryParams.page" :page-size="queryParams.limit"
                @get-list="getParentList" />
        </div>
        <div style="clear: both;"></div>
    </div>
</template>

<style lang="less" scoped>
.cooperation {
    width: 1250px;
    padding: 0 20px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

    .left-nav {
        float: left;
        margin-right: 50px;
    }

    .cooperative-brands-content {
        margin-top: 18px;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        gap: 40px;

        .item {
            cursor: pointer;

            a {
                text-decoration: none;
            }

            &:hover {
                .cooperative-logo {
                    filter: grayscale(0%);
                }

                .cooperative-text {
                    color: #3894FF;
                }
            }

            .cooperative-logo {
                text-align: center;
                height: 39px;
                color: #9e9e9e;
                filter: grayscale(100%);
                transition: all .2s;

                img {
                    height: 39px;
                }
            }

            .cooperative-text {
                color: rgba(154, 154, 154, 1);
                font-size: 14px;
                text-align: center;
                margin-top: 20px;
                transition: all .2s;
                cursor: pointer;
            }
        }
    }

    .cooperation-content {
        width: 1000px;
        float: left;

        .title-describe {
            text-align: center;
        }

        .describe {
            color: rgba(154, 154, 154, 1);
            font-size: 14px;
            line-height: 30px;

            span {
                color: rgba(15, 64, 245, 1);
                cursor: pointer;
            }
        }

        .title {
            color: rgba(16, 16, 16, 1);
            font-size: 16px;
            text-align: center;
            margin-bottom: 20px;
            font-family: 'SOURCEHANSANSCN-LIGHT';
        }
    }

}
</style>
